<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>ECharts_动态折线图</title>
  </head>
  <style>
    #chart {
      width: 800px;
      height: 400px;
      display: inline-block;
    }
  </style>
  <body>
    <button id="but">开始/结束</button>
    <div id="chart"></div>
  </body>
  <script>
    function random(min, max) {
      return parseInt(Math.random() * (max - min) + min);
    }
    let data = {
      date: [0, 1],
      data: [random(1, 100), random(1, 100)],
    };
    const option = {
      grid: {
        top: 40,
        bottom: 80,
        right: 40,
        left: 80,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: data.date,
        axisLine: {
          lineStyle: {
            color: "#000",
          },
        },
        axisLabel: {
          fontSize: 16,
        },
      },
      yAxis: {
        type: "value",
        splitLine: {
          lineStyle: {
            color: "#f60",
          },
        },
        axisLine: {
          lineStyle: {
            color: "red",
          },
        },
        axisLabel: {
          fontSize: 16,
        },
      },
      dataZoom: [
        {
          type: "inside",
          start: 0,
          end: 100,
        },
        {
          start: 0,
          end: 100,
          handleIcon:
            "M 0.0525 0.5656 L 0.0525 0 L -0.0583 0 L -0.0583 0.5656 L -0.2449 0.5656 L -0.2449 1.4344 L -0.0525 1.4344 L -0.0525 2 L 0.0525 2 L 0.0525 1.4344 L 0.2449 1.4344 L 0.2449 0.5656 L 0.0525 0.5656 Z M 0.1399 1.1953 L -0.1458 1.1953 L -0.1458 1.1137 L 0.1399 1.1137 L 0.1399 1.1953 Z M 0.1399 0.8863 L -0.1458 0.8863 L -0.1458 0.8047 L 0.1399 0.8047 L 0.1399 0.8863 Z",
          handleSize: "100%",
          handleStyle: {
            color: "#a7b7cc",
          },
          textStyle: {
            color: "rgb(200, 200, 200)",
          },
          fillerColor: "rgba(120,126,134,.3)",
          dataBackground: {
            lineStyle: {
              color: "grey",
            },
            areaStyle: {
              color: "gray",
            },
          },
          borderColor: "rgb(200, 200, 200)",
        },
      ],
      series: [
        {
          name: "模拟数据",
          type: "line",
          smooth: true,
          symbol: "none",
          sampling: "average",
          itemStyle: {
            color: "red",
          },
          data: data.data,
        },
      ],
    };

    let chart = echarts.init(document.getElementById("chart"), "shine", {
      renderer: "svg",
    });
    var i = 2;
    let task = null;
    task = setInterval(() => {
      option.xAxis.data.push(i++);
      option.series[0].data.push(10);
      console.log("x", option.xAxis.data);
      console.log("y", option.series[0].data);
      chart.setOption(option);
    }, 500);

    document.getElementById("but").onclick = function () {
      clearInterval(task);
    };

    chart.setOption(option);
  </script>
</html>
